<template>
	<el-dialog
		title="温馨提示"
		:visible="auditVisible"
		width="400px"
		center
		:close-on-click-modal="false"
		:destroy-on-close="true"
		:before-close="handleClose"
		@close="handleClose"
	>
		<div>
			<el-form
				ref="form"
				:rules="rules"
				:model="form"
				label-width="60px"
				label-position="right"
			>
				<el-row class="content-space">
					<div class="audit-title">
						<i class="el-icon-warning icon-warning"></i>
						是否要“{{ auditTitle }}”该俱乐部
					</div>
				</el-row>

				<el-row class="content-space">
					<el-col>
						<el-form-item label="备注" prop="remark">
							<el-input
								v-model.trim="form.remark"
								maxlength="100"
								type="textarea"
								clearable
							></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<div class="show-button">
						<el-button @click="handleClose">
							{{ $t('common.cancel') }}
						</el-button>
						<el-button
							type="primary"
							:loading="auditLoading"
							@click="handleConfirm"
						>
							{{ $t('common.confirm') }}
						</el-button>
					</div>
				</el-row>
			</el-form>
		</div>
	</el-dialog>
</template>

<script>
export default {
	props: {
		auditVisible: {
			type: Boolean,
			default: false
		},
		auditStatus: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			auditLoading: false,
			form: {
				remark: ''
			}
		}
	},
	computed: {
		auditTitle() {
			if (this.auditStatus === 1) {
				return '审核通过'
			} else {
				return '拒绝通过'
			}
		},
		rules() {
			let isRequired = false
			if (this.auditStatus === 2) {
				isRequired = true
			}
			return {
				remark: [
					{
						required: isRequired,
						message: '请输入备注信息',
						trigger: 'blur'
					}
				]
			}
		}
	},
	mounted() {},
	methods: {
		handleConfirm() {
			this.$refs['form'].validate((valid) => {
				if (valid) {
					this.$emit('applyClub', this.auditStatus, this.form.remark)
					this.handleClose()
				}
			})
		},
		// 关闭
		handleClose() {
			this.form.remark = ''
			this.$emit('update:auditVisible', false)
		}
	}
}
</script>
<style lang="scss" scoped>
.content-space {
	margin-bottom: 20px;
}
.audit-title {
	color: red;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.show-button {
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
